<template>
  <m-modal
    v-model="visible"
    :show-footer="showFooter"
    :show-close="showClose"
    :title="title"
    :okText="okText"
    :centerBtnText="centerBtnText"
    :cancelText="cancelText"
    :mask="mask"
    class="v-confirm"
    :width="400"
    @cancel="handleClickCancel"
    @click-center="handleClickCenter"
    @ok="handleClickOk"
  >
    <div class="_content">
      <div class="g-m-r-20 g-pd-t-4">
        <a-icon v-if="status==='error'" type="close" style="background:red;border-radius:50%;color:white;padding:2px" />
        <a-icon v-else-if="status==='info'" type="info" style="background:dodgerblue;border-radius:50%;color:white;padding:2px" />
        <a-icon v-else-if="status==='success'" type="check" style="background:#03BF16;border-radius:50%;color:white;padding:2px" />
        <a-icon v-else-if="status==='warn'" type="exclamation" style="background:orange;border-radius:50%;color:white;padding:2px" />
      </div>
      <div class="__content-wrapper">
        <m-content v-if="renderContent"  :render="renderContent"/>
        <template v-else>
          <div class="__sub-title">
            {{subTitle}}
          </div>
          <div  v-if="content" class="__content">
            {{content}}
          </div>
          <div v-if="subContent" class="__sub-content">
            {{subContent}}
          </div>
          <div v-if="explain" class="__explain">
            {{explain}}
          </div>
        </template>

      </div>

    </div>
    <div v-if="showCheckbox" slot="footer" class="g-jc-sb">
      <a-checkbox v-model="checked">{{checkboxText}}</a-checkbox>
      <div>
        <!-- <a-button @click="handleDownLoadTemplate">模板下载</a-button> -->
        <a-button v-if="cancelText" class="g-m-r-12" @click="handleClickCancel">{{cancelText}}</a-button>
        <a-button v-if="centerBtnText" class="g-m-r-24" @click="handleClickCenter">{{centerBtnText}}</a-button>
        <a-button type="primary" @click="handleClickOk">{{okText}}</a-button>
      </div>

    </div>
  </m-modal>
</template>
<script>
import { Portal } from 'src/components/common/Portal.vue';
import Modal from 'src/components/common/CustomModal';
import { createFunctionalComponent } from 'src/util/common';
const ContentRender = createFunctionalComponent();
const com = {
  name: 'comp-save-loading',
  components: {
    'm-modal': Modal,
    'm-content': ContentRender

  },
  props: {
    title: {
      type: String,
      default: '提示'
    },
    subTitle: String,
    content: {
      type: String,
      default: "确定？"
    },
    subContent: String,
    explain: String,
    showFooter: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    okText: {
      type: String,
      default: "确定"
    },
    centerBtnText: {
      type: String,
      default: ""
    },
    cancelText: {
      type: String,
      default: "取消"
    },
    status: {
      type: String,
      default: 'info'
    },
    mask: {
      type: Boolean,
      default: true
    },
    renderContent: Function,
    showCheckbox: Boolean,
    checkboxText: String,
    defaultChecked: {
      type: Boolean,
      default: false
    },
    onClickCancel: Function,
    onClickOk: Function,
    onClickCenter: Function
  },
  data() {
    return {
      visible: false,
      checked: this.defaultChecked
    };
  },
  mounted(){
    this.visible = true;

  },
  methods: {
    handleOk(){
      this.visible = false;
      this.$emit('sure', this.showCheckbox ? { checked: this.checked } : undefined);
    },
    handleCancel(e){
      this.visible = false;
      this.$emit('close', e);
    },
    handleCenter(e){
      this.visible = false;
      this.$emit('sure', this.showCheckbox ? { checked: this.checked } : undefined);
    },
    handleClickOk(){
      if (this.onClickOk){
        this.onClickOk(this);
      } else {
        this.handleOk();
      }
    },
    handleClickCancel(){
      if (this.onClickCancel){
        this.onClickCancel(this);
      } else {
        this.handleCancel();
      }
    },
    handleClickCenter(){
      if (this.onClickCenter){
        this.onClickCenter(this);
      } else {
        this.handleCenter();
      }
    }
  }
};

export default com;
export const $confirm = new Portal(com);
export const portal = $confirm;
</script>
<style lang="scss" scoped>

.v-confirm {
	._content {
		display: flex;

		background: white;
    padding: 20px;
    .__icon-wrapper {
      width: 60px;
      flex: 0 0 60px

    }
    .__content-wrapper {
      width: 100px;
      flex:1 1 auto;
      .__sub-title {
        color: black;
        font-weight: 600;
        margin: 4px 0;
        font-size: 14px;

      }
      .__content{
        color: rgba($color: #000000, $alpha: 0.85);
      }
      .__sub-content{
        color: rgba($color: #000000, $alpha: 0.85);
      }
      .__explain{
        color: rgba($color: #000000, $alpha: 0.65);
      }

    }

	}

}
</style>
